<template>
  <div class="index-page">
    <!-- 使用 Element Plus 的滚动条组件包裹内容 -->
    <!-- 页面主体内容 -->
    <div class="body">
      <!-- 英雄区域，展示主要信息和图片 -->
      <section class="hero">
        <!-- 英雄内容区域，包括标题、副标题、描述和标签 -->
        <div class="hero-content">
          <h1 class="name">安睿智家</h1>
          <p class="sub-name">anrui smart home</p>
          <p class="description">
            专注于智慧养老，旨在通过科技手段提升老年人的生活质量，结合智能硬件与软件服务，为老年人及其家属提供全方位的健康管理与生活支持。
          </p>
          <div class="tags">
            <span class="tag tag-efficient">高效</span>
            <span class="tag tag-fast">快捷</span>
            <span class="tag tag-safe">安心</span>
          </div>
        </div>
        <div class="ellipse">

          <p class="ellipse1"><img src="../assets/images/椭圆%203.png" alt="智慧养老"></p>
          <p class="ellipse2"><img src="../assets/images/椭圆%204.png" alt="智慧养老"></p>
          <p class="ellipse3"><img src="../assets/images/椭圆%205.png" alt="智慧养老"></p>

        </div>
        <!-- 英雄图片区域 -->
        <div class="hero-image">
          <img src="../assets/images/蒙版组%202.png" alt="欢乐的老人">
        </div>
      </section>

      <!-- 特征区域，展示产品的主要特点 -->
      <section class="features">
        <!-- 每个特征项 -->
        <div class="feature-item">
          <img src="../assets/images/蒙版组%203.png" alt="智能监控">
          <h3>智能监控</h3>
        </div>
        <div class="feature-item">
          <img src="../assets/images/蒙版组%204.png" alt="社区管理">
          <h3>社区管理</h3>
        </div>
        <div class="feature-item">
          <img src="../assets/images/蒙版组%205.png" alt="家居签约">
          <h3>家居签约</h3>
        </div>
        <div class="feature-item">
          <img src="../assets/images/蒙版组%206.png" alt="智能音箱">
          <h3>智能音箱</h3>
        </div>
      </section>

      <!-- 服务区域，动态展示服务项目 -->
      <section class="services">
        <!-- 服务项，使用v-for指令遍历services数组 -->
        <div class="service-item" v-for="service in services" :key="service.title">
          <img :src="service.image" :alt="service.title">
          <p>{{ service.title }}</p>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup name="Index">
// 这里可以添加对 Index 组件的逻辑代码
</script>

<style scoped lang="scss">
// 首页的整体样式
.index-page {
  height: 100vh;
  overflow: auto;
  padding: 24px;
}

.name {
  line-height: 50px;
  font-size: 60px;
  font-weight: normal;
  color: #333333;
  font-family: fangsong;
}
.sub-name {
  left: 50px;
  margin-top: 21px;
  font-style: italic;
  line-height: 50px;
  font-size: 60px;
  font-weight: normal;
  color: #333333;
}

.description {
  left: 50px;
  top: 5px;
  line-height: 22px;
  margin-top: 30px;
}

.ellipse1 {
  position: absolute;
  top: 100px;
  left: 5px;
  width: 10px;
  height: 10px;
}

// 英雄区域的样式
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px;
  background: linear-gradient(to right, #f9fafc, #ffffff);
}

// 英雄内容区域的样式
.hero-content {
  max-width: 500px;
}

// 英雄图片样式
.hero-image img {
  max-width: 650px;
  border-radius: 12px;
  //box-shadow: 0 4px 6px rgba(0, 0, 0, 1);
}

// 标签区域样式
.tags {
  display: flex;
  gap: 12px;
}

// 标签样式
.tag {
  margin-top: 30px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
  color: white;
}

// 不同标签的背景颜色
.tag-efficient { background-color: rgba(219, 238, 255, 1); }
.tag-fast { background-color: rgba(254, 222, 229, 1); }
.tag-safe { background-color: rgba(249, 230, 168, 1); }

// 服务区域样式 修改为弹性布局
.services {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 40px;
}

// 每个服务项的样式 修改为弹性布局的子项
.service-item {
  flex: 1 1 calc(25% - 20px);
  text-align: center;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  padding: 20px;
  transition: transform 0.3s ease;
}

// 服务项悬浮效果
.service-item:hover {
  transform: translateY(-5px);
}

// 服务项图片样式
.service-item img {
  max-width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
}


// 特征区域样式 修改为弹性布局
.features {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

// 每个特征项样式 修改为弹性布局的子项
.feature-item {
  flex: 1 1 200px;
  background: white;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

// 特征项悬浮效果
.feature-item:hover {
  transform: scale(1.05);
}

// 特征项图片样式
.feature-item img {
  width: 80%;
  border-radius: 10px;
}
</style>